<template>
	<view>
		<view class="waterfall-wrap">
			<view>
				<navigator :url="'/pages/goods/detail?id='+item.id" v-for="(item, index) in leftData" :key="item.id"
					class="post-item">
					<u--image width="100%" :src="$utils.imgPath(item.img_list[0])" :lazy-load="true" radius="10rpx">
					</u--image>
					<view class="post-title">{{ item.title.substring(0, 20) }}</view>
					<view class="footer-wrap">
						<view class="price-num">￥{{item.price}}</view>
						<view class="time">{{item.create_time|timeFrom}}</view>
					</view>
				</navigator>
			</view>
			<view>
				<navigator :url="'/pages/goods/detail?id='+item.id" v-for="(item, index) in rightData" :key="item.id"
					class="post-item">
					<u-image width="100%" :src="$utils.imgPath(item.img_list[0])" :lazy-load="true" radius="10rpx">
					</u-image>

					<view class="post-title">{{ item.title.substring(0, 20) }}</view>
					<view class="footer-wrap">
						<view class="price-num">￥{{item.price}}</view>
						<view class="time">{{item.create_time|timeFrom}}</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 加载状态 -->
		<block v-if="leftData.length === 0 && loadStatus == 'nomore'">
			<u-empty text="暂无商品" icon="/static/empty.png"></u-empty>
		</block>
		<block v-else>
			<u-loadmore :status="loadStatus" loadingIcon='semicircle' :iconColor="themesColor" />
		</block>
	</view>
</template>

<script>
	import {
		themesColor
	} from '@/uni.scss';

	export default {
		name: 'q-goods-waterfall',
		props: {
			list: {
				type: Array,
				default: []
			},
			loadStatus: {
				type: String
			}
		},
		data() {
			return {
				themesColor,
				leftData: [],
				rightData: []
			};
		},
		watch: {
			list(value) {
				this.handelData();
			}
		},
		methods: {
			handelData() {
				let that = this;
				this.list.forEach((item, index) => {
					let i = index + 1;
					if (i % 2 == 0) {
						that.rightData.push(item);
					} else {
						that.leftData.push(item);
					}
				});
			},
			// 清空数据
			clear() {
				this.leftData = [];
				this.rightData = [];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.waterfall-wrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10rpx;
		padding: 0 30rpx;
	}

	.post-item {
		margin-bottom: 25rpx;
		margin-top: 25rpx;

		.cover-img {
			width: 100%;
			max-height: 600rpx;
			border-radius: 10rpx;
		}

		.post-title {
			font-size: 28rpx;
		}
	}

	.footer-wrap {
		display: flex;

		.price-num {
			color: orangered;
			font-weight: bold;
			margin-right: 10rpx;
		}

		.time {
			margin-left: auto;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>